<template>
  <view class="content">
    <u-navbar title="登录" :is-back="false">
    </u-navbar>
    <view class="header">
      <image src="/static/logo.png"></image>
    </view>

    <view class="list">
      <view class="list-call">
        <image class="img" src="/static/images/public/login/1.png"></image>
        <!-- <input class="sl-input" v-model="username" type="number" maxlength="11" placeholder="输入手机号" /> -->
        <input class="sl-input" v-model="username" type="text" maxlength="11" placeholder="输入用户名"/>
      </view>
      <view class="list-call">
        <image class="img" src="/static/images/public/login/1.png"></image>
        <input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true"/>
      </view>
    </view>

    <view class="button-login" hover-class="button-hover" @tap="bindLogin()">
      <text>登录</text>
    </view>
        <view class="agreenment">
          <navigator url="forget" open-type="navigate">忘记密码</navigator>
           <text>|</text>
            <navigator url="../register/register" open-type="navigate">注册账户</navigator>
        </view>
  </view>
</template>

<script>
import {doLogin} from '@/api/public.js';
import {getLoginUserInfo} from "@/api/user.js";
import {Socket} from "@/api/Socket.js";

export default {
  data() {
    return {
      username: '',
      // username:"123456c",
      password: '',
      //是否允许点击登录
      logClick: true,
    };
  },
  onLoad() {
    /* if (uni.getStorageSync('token')) {
       uni.showToast({
         title: '已登录',
         icon: 'none'
       });
       setTimeout(() => {
         uni.navigateBack();
       }, 1000);
     }*/
  },
  methods: {
    bindLogin() {
      //判断是否允许点击登录按钮
      if (this.logClick) {
        //点击一次变为false
        this.logClick = false
        doLogin({username: this.username, password: this.password}).then(res => {
              if (res.data.code === 0) {
                //存token
                uni.setStorageSync('token', res.data.access_token);
                getLoginUserInfo().then(res => {
                  //将返回的userinfo存储在store里面
                  if(res.data.data.roles.indexOf('mj')!=-1){
                    uni.setStorageSync('userInfo', res.data.data);
                    console.log(res.data.data)
                    //获取用户类型与展示tabList的交集进行角色确认
                    // let tab = Object.keys(tabBer).filter(function (val) { return uni.getStorageSync('userInfo').roles.indexOf(val) > -1 })
                    //判断角色是否为空
                    // if (tab.length!==0){
                    // let userType = uni.getStorageSync('userInfo').userType
                    // if (userType !== null && userType !== '') {
                    var socket = new Socket();
                    socket.initWebSocket();
                    this.$store.dispatch("SET_SOCKET", socket)
                    //进行登录成功提示
                    uni.showToast({
                      title: '登录成功',
                      icon: 'none'
                    });

                    //成功后延迟0.5秒跳转
                    setTimeout(() => {
                      uni.switchTab({
                        url: '/pages/buyer/main/buyerMain',
                      })
                      console.log("跳转页面")
                      // uni.navigateBack({
                      //   delta:1
                      // })
                    }, 100);
                    //登录成功转为true可以登录
                    setTimeout(() => {
                      this.logClick = true
                    }, 50000);
                  }else{
                    uni.showToast({
                      title: '登录失败，当前角色不允许登录',
                      icon: 'none'
                    });
                    //登录失败1秒后转为true可以登录
                    setTimeout(() => {
                      this.logClick = true
                    }, 1000);
                  }

                  // } else {
                  //   uni.showToast({
                  //     title: '登录失败，请确认是否设置角色',
                  //     icon: 'none'
                  //   });
                  //   //登录失败1秒后转为true可以登录
                  //   setTimeout(() => {
                  //     this.logClick = true
                  //   }, 1000);
                  // }
                })
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                });
                //登录失败1秒后转为true可以登录
                setTimeout(() => {
                  this.logClick = true
                }, 1000);
              }
            }
        ).catch(err => {
          uni.showToast({
            title: '登录失败,请检查网络连接',
            icon: 'none'
          });
          //登录失败1秒后转为true可以登录
          setTimeout(() => {
            this.logClick = true
          }, 1000);
        })
      }
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header {
  width: 161rpx;
  height: 161rpx;
  /*background: rgb(63, 120, 235);*/
  /*box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);*/
  /*border-radius: 50%;*/
  margin-top: 30rpx;
  margin-left: auto;
  margin-right: auto;
}

.header image {
  width: 161rpx;
  height: 161rpx;
  /*border-radius: 50%;*/
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 50rpx;
  padding-left: 70rpx;
  padding-right: 70rpx;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
  width: 40rpx;
  height: 40rpx;
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
}

.button-login {
  color: #FFFFFF;
  font-size: 34rpx;
  width: 470rpx;
  height: 100rpx;
  background: linear-gradient(-90deg, rgb(27, 197, 229), rgba(188, 226, 158, 1));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100rpx;
}

.button-hover {
  background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreenment {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  margin-top: 80rpx;
  color: #319ff3;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
}

.agreenment text {
  font-size: 24rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}
</style>
